<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="../../css/style.css">
    <style>
        .big_box {
            width: 503px;
            /*height: 197px;*/
            height: 262px;
            /*background-color: pink;*/
            position: relative;
            overflow: hidden;
        }
        .up_box {
            height: 82px;
            width: 100%;
        }
        .small_box {
            width: 172px;
            height: 81px;
            text-align: left;
            padding: 14px 0 0 14px;
            /*line-height: 81px;*/
            background-image: url("../12/xtgjkuang.png")
        }
        .yujing{
            width: 159px;
            height: 32px;
            color: #00fcf9;
            line-height: 32px;
            font-size: 18px;
            text-align: center;
            font-weight: 800;
            background: linear-gradient(to right,#072149,#2266ba,#072149);
        }
        .down_box {
            margin-top: 31px;
        }
        .img_box {
            width: 106px;
            height: 110px;
            position: absolute;
            top: 50px;
            left: 198px;
        }
        .word_box {
            /*font-size: 16px;*/
            /*color: #00caff;*/
            font-size: 18px;
            color: #fff;
        }
        .num_box {
            font-size: 14px;
            color: #00faa8;
            font-style:italic;
        }
        .value_box {
            font-size: 20px;
            margin-top: 20px;
        }
        .value_name {
            line-height: 28px;
            margin-right: 13px;
        }

        @keyframes ringing
        {
            from  {transform:rotate(-30deg);}
            to  {transform:rotate(30deg);}
        }
        .xxAnimation {
            animation: ringing 0.3s linear 0s 5 alternate;
        }
        .change {
            color: red;
        }
        .two_box {
            position: relative;
            margin-top: 65px;
        }
        #select1 {
            width: 120px;
            height: 32px;
            font-size: 13px;
            border: 1px solid #44d3ef;
            border-radius: 3px;
            color: #07dafe;
            position: absolute;
            top: 0;
            left: 376px;
            background-color: #021636;
            cursor: pointer;
            text-align-last: center;
        }
    </style>
</head>
<body style="overflow: hidden">
<div class="big_box">
    <!--  <select name="" id="select1">
          <option value="sslgz" selected>闪速炉干燥</option>
          <option value="ylxs">余氯吸收</option>
          <option value="gjszhhs">贵金属综合回收</option>
          <option value="lsdata">30万吨硫酸</option>
      </select>-->
    <div class="two_box">
        <div class="up_box fix">
            <div class="small_box l">
                <p class="word_box"></p>
                <div class="num_box">
                    <p class="value_name l">紧急告警</p>
                    <p class="value_box l GYJJGJ" style="color: #d72b14"></p>
                </div>
            </div>
              <div class="yujing l">实时预警</div>
            <div class="small_box r">
                <p class="word_box"></p>
                <div class="num_box">
                    <p class="value_name l">重要告警</p>
                    <p class="value_box l GYZYGJ" style="color: #fa6e03"></p>
                </div>
            </div>
        </div>
        <div class="down_box fix">
            <div class="small_box l">
                <p class="word_box"></p>
                <div class="num_box">
                    <p class="value_name l">次要告警</p>
                    <p class="value_box l GYCYGJ" style="color: #f6f409"></p>
                </div>
            </div>
            <div class="small_box r">
                <p class="word_box"></p>
                <div class="num_box">
                    <p class="value_name l">提示告警</p>
                    <p class="value_box l GYTSGJ" style="color: #109beb"></p>
                </div>
            </div>
        </div>
        <div class="img_box">
            <img src="../12/xtgjlogo.png" alt="">
        </div>
    </div>
</div>
</body>
<script type="text/javascript" charset="utf-8" src="../../js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../../js/common.js"></script>
<script>
    $(function () {
        // $('#select1').change(function() {
        //     let value = $('#select1').val()
        //     // console.log(value)
        //     change(value)
        // })

        // let i =0;
        // setInterval(function () {
        //   i++;
        //   $('#select1 option').eq(i%4).attr('selected','selected').siblings().removeAttr('selected');
        //   let value = $('#select1').val()
        //   change(value)
        // },5000)

        change('sslgz')

        function change(value) {
            getJson('api/WEB-SQL/websql/openInterface/SHP_GYXTGJ',{},function (res) {
                if(res.code == 200){
                    /*   $('.word_box').html('')
                       $('.value_box').html('')*/
                    if (res.code === 200) {
                        $('.GYJJGJ').text(res.data[0].gyjjgj)
                        $('.GYZYGJ').text(res.data[0].gyzygj)
                        $('.GYCYGJ').text(res.data[0].gycygj)
                        $('.GYTSGJ').text(res.data[0].gytsgj)


                        /*     let arr = res.data
                            for (let i = 0; i < arr.length; i++) {

                                $('.word_box').eq(i).html(arr[i].value)

                             }*/
                        //    $('.installed').eq(1).html(arr[1].value)



                        /*  $('.due').val(res.duepair)
                          $('.date').val(res.datetimed)*/
                        /*
                     $('.word_box').eq(i).html(arr[i].name)
                         $('.value_box').eq(i).html(arr[i].value)
                              $('.word_box').eq(i).html(arr[i].installed)
                                $('.value_box').eq(i).html(arr[i].installed)*/

                    }
                }
            })
            /*$.ajax({
                type: 'GET',
                url: "http://172.16.3.123:9120//iot/query/device/shadow?product=jc_equip_data_real&device=jc_realdata_" + value,
                data: {},
                dataType: 'json',
                success: function (res) {
                    $('.word_box').html('')
                    $('.value_box').html('')
                    if (res.code === 200) {
                        let arr = res.data.fields
                        for (let i = 0; i < arr.length; i++) {
                            $('.word_box').eq(i).html(arr[i].name)
                            $('.value_box').eq(i).html(arr[i].value)
                        }
                    }
                },
                error: function (msg) {

                }
            });*/




        }

        setInterval(function () {
            change()
        },60000)
    })

</script>
</html>
